<template>
	<div>
		<!-- 查询条件 -->
		<div style='margin-bottom: 3px' v-show='!hideQuery'>
			<div style='float:right;margin-top: 3px'>
				<span><el-button type='primary' @click='query' size='mini'>查询</el-button></span>
				<span><el-button @click='resetQuery' size='mini'>重置</el-button ></span>
			</div>
			<el-form ref='formQuery' :model='queryParams' label-width='68px' 
				class='c-form-condensed' inline size='mini'>
				<el-form-item label='附件名' prop='name'>
					<el-input v-model='queryParams.name' clearable></el-input>
				</el-form-item>
			</el-form>
		</div>
		<!--/ 查询条件 -->
		<slot name='button'></slot>
		<!-- 数据表格 -->
		<el-table 
			:data='list' 
			ref='tableList'
			v-loading='loading'
			border 
			stripe
			:size='size'
			:max-height='maxHeight'
			@sort-change='sortChange'>
			<el-table-column prop='name' label='附件名' min-width='150' >
				<template slot-scope='{ row }'>
					<span class='c-link' @click='download(row)'>{{ row.name }}</span>
				</template>
			</el-table-column>
			<el-table-column prop='size' label='大小' align='right' sortable='custom' width='100' >
				<template slot-scope='{ row }'>
					{{ Math.round(row.size/100)/10 }}KB
				</template>
			</el-table-column>
			<el-table-column prop='upload_time' label='上传时间' sortable='custom' width='160' ></el-table-column>
			<!-- slot[column] -->
			<slot name='column'></slot>
			<!--/ slot[column]-->
		</el-table>
		<!-- 数据表格 -->
		<!-- 分页 -->
		<el-pagination 
			v-if='!noPage'
			style='margin-top: 10px'
	    :page-sizes = "[10, 20, 50, 100]"
	    :page-size= "requestParams.pageSize"
	    :current-page.sync = "requestParams.currentPage"
	    layout="total, sizes, prev, pager, next, jumper"
	    :total="dataTotal"
	    @size-change='sizeChange'
	    @current-change='getData'
	    >
	  </el-pagination>
	  <!--/ 分页 -->
	</div>
</template>
<script>
import attachApi from '@/api/attach'

export default {
	components:{  },
	props:{
		size:{
			type:String,
			default:''
		},
		maxHeight:{
			default:350
		},
		params:{
			default:()=>({})
		},
		inDialog:{
			type:Boolean,
			default:false
		},
		hideQuery:{
			type:Boolean,
			default:false
		},
		noPage:{
			type:Boolean,
			default:true
		}
	},
	data(){
		return {
			loading: false,			
			list:[],
			dataTotal:0,		
			queryShowMore:false,
			//查询条件字段
			queryParams:{
				name:'',//附件名
			},
			//数据请求的参数
			requestParams:{
				pageSize:10,//分页大小
				currentPage:1,//当前页
				sortProp:'',
				sortOrder:'',
				noPage:this.noPage?1:0,
				isAttachIds:1,
			}	
		}
	},
	created(){
		//this.getData()
	},
	methods:{
		initData(){
			this.resetQuery()
		},
		reload(){
			this.getData()
		},
		//分页容量大小发生变化时
		sizeChange(value){
			this.requestParams.pageSize=value
			this.getData()
		},
		//获取数据
		getData() {
			this.loading=true
			attachApi.getList(this.requestParams).then(res=>{
				this.list = res.data
				this.dataTotal = res.data.length
				this.loading = false
			})
		},
		//查询方法
		query({ key }={}){
			if(key){
				let value = this.queryParams[key]
				this.requestParams = {...this.requestParams,[key]:value}
			}else{
				this.requestParams = {...this.requestParams,...this.queryParams}
			}			
			this.getData()
		},
		//重置查询条件
		resetQuery(){
			this.$refs.formQuery.resetFields()
			this.queryParams = {...this.queryParams,...this.params}
			this.requestParams.currentPage=1
			this.query()
		},
		sortChange({prop,order}){
			this.requestParams.sortProp = prop
			this.requestParams.sortOrder = order
			this.getData()
		},
		insert(data){
			this.list.unshift(data)
		},
		download(row){
			attachApi.download(row.save_name)
		},
		clear(){
    	this.list = []
    	this.dataTotal = 0
    }
	}
}
</script>